<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
    <link rel="stylesheet" href="/webjars/layui/2.5.5/css/layui.css">
    <script src="/webjars/jquery/3.4.1/jquery.min.js"></script>
    <style>
        body {
            padding: 20px;
        }
        button {
            margin: 20px;
        }
    </style>
</head>

<body>

    <div >
        <span>UserName: </span>
        <input type="text" id="username" class="layui-input"> <br>

        <span>Password：</span>
        <input type="password" id="password" class="layui-input">

        <input type="submit" value="LOGIN" id="login" class="layui-btn"/>
    </div>

        <script>
            $("#login").click(function() {
                var username = $("#username").val();
                var password = $("#password").val();
                $.ajax({
                    url: "user/login", //请求URL
                    type: "POST", //请求方式
                    data: {
                        username: username,
                        password: password
                    },
                    beforeSend: function(res) {
                        //请求前的回调函数
                    },
                    success: function(res) {
                        //请求成功的回调函数
                        if (res == "success") {
                            window.location.href = "/home.html";
                        } else {
                            alert("登录失败");
                        }

                    },
                    complete: function(res) {
                        //请求完成的回调函数
                    },
                    error: function(res) {
                        //请求出错的回调函数
                    }
                });
            });
        </script>
</body>
</html>